<template>
	<view>
		<!-- 自定义状态栏 -->
		<!-- <uni-nav-bar left-icon="back" left-text="返回" color="#26DB8B" ></uni-nav-bar> -->
		
		<!-- 登录部分 -->
		<view class="wellcome">
			<view class="hydl">账号验证</view>
			<view class="ysok">输入手机号及验证码</view>

			<view class="num">手机号码</view>
			<view class="unum">
				<input type="text" v-model="userNamePhone" value="" placeholder="请输入手机号" />
				<!-- <view class="psd" v-show="tips">账号不存在</view> -->
			</view>

			<view class="pwd">验证码</view>
			<view class="unum">
				<input type="text" v-model="userPwdPhone" value="" placeholder="请输入验证码" />
				<view class="psd register" @tap="getPhonecode">{{codeBtn.codeText}}</view>
			</view>
			<button type="primary" @tap="submitPhone">下一步</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loginWay: "短信验证码登陆",
				//用户输入内容
				userName: "",
				userPwd: "",
				userNamePhone: "",
				userPwdPhone: "",
				//验证规则
				rules: {
					userName: {
						rule: /\S/,
						msg: "账号不能为空"
					},
					userPwd: {
						rule: /^[0-9a-zA-Z]{6,16}$/,
						msg: "密码应该为6-16位"
					},
					userNamePhone: {
						rule: /^1[3456789]\d{9}$/,
						msg: "手机号格式错误"
					},
					userPwdPhone: {
						rule: /^[0-9]{6}$/,
						msg: "请输入6位数字验证码"
					}
				},
				//验证码按钮
				codeBtn: {
					codeTime: 60,
					codeText: "获取验证码",
					codeStatus: true
				}
			}
		},
		methods: {
			//账号密码点击登录
			submit() {
				if (!this.validate('userName')) return;
				if (!this.validate("userPwd")) return;
				uni.showLoading({
					title: "登录中..."
				});
				//向服务器发送登陆请求
				setTimeout(() => {
					//隐藏登录状态
					uni.hideLoading();
					uni.navigateBack({
						delta: 1
					})
				}, 2000)
			},
			//判断验证是否符合要求，合法性校验
			validate(key) {
				let bool = true;
				if (!this.rules[key].rule.test(this[key])) {
					//提示信息
					uni.showToast({
						icon:"none",
						title: this.rules[key].msg,
					})
					//取反
					bool = false;
					return false;
				}
				return bool;
			},
			//手机验证码登录    
			submitPhone() {
				if (!this.validate('userNamePhone')) return;
				if (!this.validate("userPwdPhone")) return;
				//向服务器发送登陆请求
				uni.request({
					url: 'http://.....', //接口地址
					data: {
						user_MobilePhone: this.userNamePhone,
						user_Password: this.userPwdPhone
					},
					method: "POST",
					success: (res) => {
						console.log("之前的数据状态" + "账号：" + this.userNamePhone + "密码：" + this.userPwdPhone)
						let list = JSON(stringify(res.data))
						console.log("数据状态:" + list)
						if (list == "[]") {
							uni.showToast({
								icon: 'none',
								title: '用户名密码错误'
							})
							return
						}
						uni.showToast({
							icon: "none",
							title: "登陆成功"
						})
						uni.switchTab({
							url: "../newpsd/newpsd"
						})
					},
					fail: () => {
						uni.showToast({
							icon: "none",
							title: "网络异常，请稍后再试"
						})
					}
				})
			},
			//获取验证码按钮点击计时事件
			getPhonecode() {
				if (this.validate('userNamePhone') && this.codeBtn.codeStatus) {
					this.codeBtn.codeStatus = false
					let timerId = setInterval(() => {
						let codetime = this.codeBtn.codeTime
						codetime--
						this.codeBtn.codeTime = codetime
						this.codeBtn.codeText = codetime + "s"
						if (codetime < 1) {
							clearInterval(timerId)
							this.codeBtn.codeText = "重新获取"
							this.codeBtn.codeTime = 60
							this.codeBtn.codeStatus = true
						}
					}, 1000)
				}
			}, 
		}
	}
</script>

<style lang="scss">
	* {
		// border: 1rpx solid;
	}


	/* 自定义导航栏 */
	

	.wellcome {
		padding: 70rpx;

		.hydl {
			font-size: 37rpx;
			font-weight: 600;
		}

		.ysok {
			font-size: 23rpx;
			margin-top: 20rpx;
			color: #999999;
		}

		.num {
			margin-top: 100rpx;
			font-size: 28rpx;
		}
		
		.unum{
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #e8e8e8;
				margin-top: 14rpx;
			.psd{
				color: red;
				font-size: 20rpx;
				height: 32rpx;
				padding: 10rpx;
			}
			.register{
				color: #4CD964;
			}
		}

		input {
			font-size: 28rpx;
			color: #4CD964;
			padding: 10rpx 0;
		}

		.pwd {
			margin-top: 50rpx;
			font-size: 28rpx;
		}

		button {
			margin-top: 60rpx;
		}

		.forgetpwd {
			margin-top: 20rpx;
			font-size: 30rpx;
			float: right;
			color: #999999;
		}
	}
</style>
